<!--
 * @Author Malred
 * @Date 2025-06-02 05:19:20
 * @Description 
 -->
<!-- page.vue -->
<template>
  <div class="container">
    <div class="container-wrapper space-y-4">
      <base-table-header
          :delete-disabled="selectedRows.length === 0"
          @add="openAddDialog"
          :onDeleteSelected="handleDeleteSelected"
      >
        <template #search>
          <!-- 文本输入 -->
          <base-table-search-item label="用户名" v-model="searchForm.username"/>

          <!-- 邮箱输入 -->
          <base-table-search-item label="邮箱" v-model="searchForm.email"/>

          <!-- ID 输入 -->
          <base-table-search-item label="ID" v-model="searchForm.id"/>

          <!-- 状态选择 -->
          <base-table-search-select
              label="状态"
              v-model="searchForm.status"
              :options="[
                { label: '启用', value: 'active' },
                { label: '禁用', value: 'inactive' }
              ]"
          />

          <!-- 创建时间 -->
          <base-table-search-date label="创建时间" v-model="searchForm.createTime"/>

          <!-- 清空按钮 -->
          <el-button type="info" size="small" @click="resetSearchForm">重置</el-button>
        </template>
      </base-table-header>

      <base-table-body
          :data="tableData"
          :columns="columns"
          @selection-change="handleSelectionChange"
          @edit="openEditDialog"
          @delete="handleDelete"
          :onDelete="handleDelete"
      >
        <!-- 自定义操作列 -->
        <template #operation="props">
          <el-button link type="primary" size="small" @click="openEditDialog(props.row)">编辑</el-button>
          <el-button link type="danger" size="small" @click="handleDelete([props.row])">删除</el-button>
        </template>
      </base-table-body>

      <!-- 弹窗部分 -->
      <base-operation ref="operationDialog" title="用户信息" @submit="submitForm">
        <base-operation-item
            label="用户名"
            :value="formData.username"
            @update:value="val => formData.username = val"
        />
        <base-operation-item
            label="邮箱"
            :value="formData.email"
            @update:value="val => formData.email = val"
        />
      </base-operation>

    </div>
  </div>
</template>


<script setup>
import {ref, watch} from 'vue';

// 数据源
const originalData = [
  {id: 1, username: 'admin', email: 'admin@example.com', status: 'active', createTime: '2025-06-01'},
  {id: 2, username: 'user1', email: 'user1@example.com', status: 'inactive', createTime: '2025-06-02'},
  {id: 3, username: 'test', email: 'test@example.com', status: 'active', createTime: '2025-06-03'}
];
const tableData = ref([...originalData]);

// 表格列配置
const columns = [
  {prop: 'id', label: 'ID'},
  {prop: 'username', label: '用户名'},
  {prop: 'email', label: '邮箱'},
  {prop: 'status', label: '状态'},
  {prop: 'createTime', label: '创建时间'},
];

// 搜索表单
const searchForm = ref({
  username: '',
  email: '',
  id: '',
  status: '',
  createTime: ''
});

// 重置搜索表单
const resetSearchForm = () => {
  searchForm.value = {
    username: '',
    email: '',
    id: '',
    status: '',
    createTime: ''
  };
};


// 新增/编辑表单数据
const formData = ref({
  username: '',
  email: '',
});

const operationDialog = ref(null);

// 打开新增弹窗
const openAddDialog = () => {
  formData.value = {username: '', email: ''};
  operationDialog.value.show();
};

// 打开编辑弹窗
const openEditDialog = (row) => {
  formData.value = {...row};
  operationDialog.value.show();
};

// 提交新增/编辑
const submitForm = () => {
  if (!formData.value.id) {
    // 新增
    const newRow = {
      id: Date.now(),
      username: formData.value.username,
      email: formData.value.email
    };
    tableData.value.unshift(newRow);
  } else {
    // 编辑
    const index = tableData.value.findIndex(item => item.id === formData.value.id);
    if (index > -1) {
      tableData.value.splice(index, 1, {...formData.value});
    }
  }
};

// 多选行
const selectedRows = ref([]);
const handleSelectionChange = (rows) => {
  selectedRows.value = rows;
};

// 删除
const handleDelete = (rows) => {
  tableData.value = tableData.value.filter(row =>
      !rows.some(r => r.id === row.id)
  );
};

// 批量删除
const handleDeleteSelected = () => {
  if (selectedRows.value.length === 0) return;
  handleDelete(selectedRows.value);
};

function applySearch(data, search) {
  const {username, email, id, status, createTime} = search;

  return data.filter(item => {
    return (
        (!username || item.username.toLowerCase().includes(username.toLowerCase())) &&
        (!email || item.email.toLowerCase().includes(email.toLowerCase())) &&
        (!id || item.id.toString().includes(id.toString())) &&
        (!status || item.status === status) &&
        (!createTime || item.createTime === createTime)
    );
  });
}

// 监听搜索变化
watch(
    () => searchForm.value,
    (newVal) => {
      tableData.value = applySearch(originalData, newVal);
    },
    {deep: true}
);


</script>

<style scoped>
.search-form {
  display: flex;
  align-items: center; /* 关键：垂直居中 */
  gap: 12px; /* 可选：增加项之间间距 */
}
</style>